import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_scan_tool/bloc/device/device_bloc.dart';
import 'package:flutter_svg/svg.dart';
import 'package:simple_animations/simple_animations.dart';

class TemperatureHumidityView extends StatefulWidget {
  final AnimationController? animationController;
  final Animation<double>? animation;

  const TemperatureHumidityView(
      {Key? key, this.animationController, this.animation})
      : super(key: key);

  @override
  State<TemperatureHumidityView> createState() =>
      _TemperatureHumidityViewState();
}

class _TemperatureHumidityViewState extends State<TemperatureHumidityView>
    with SingleTickerProviderStateMixin {
  AnimationController? _animationController;

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 5));
    _animationController?.repeat();
  }

  @override
  void dispose() {
    _animationController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<DeviceBloc, DeviceState>(
      builder: (context, state) {
        return AnimatedBuilder(
          animation: widget.animationController!,
          builder: (BuildContext context, Widget? child) {
            return FadeTransition(
              opacity: widget.animation!,
              child: Transform(
                transform: Matrix4.translationValues(
                    0.0, 30 * (1.0 - widget.animation!.value), 0.0),
                child: Padding(
                  padding: const EdgeInsets.only(
                      left: 24, right: 24, top: 16, bottom: 18),
                  child: Container(
                    decoration: BoxDecoration(
                        gradient: const LinearGradient(
                          colors: [Colors.tealAccent, Colors.teal],
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                        ),
                        borderRadius: const BorderRadius.only(
                            topLeft: Radius.circular(10.0),
                            topRight: Radius.circular(120.0),
                            bottomLeft: Radius.circular(10.0),
                            bottomRight: Radius.circular(10.0)),
                        boxShadow: [
                          BoxShadow(
                              color: const Color(0xFF3A5160).withOpacity(0.2),
                              offset: const Offset(1.1, 1.1),
                              blurRadius: 10.0),
                        ]),
                    child: Column(
                      children: [
                        Row(
                          children: [
                            Expanded(
                              child: Padding(
                                padding: const EdgeInsets.only(
                                    left: 8, right: 8, top: 4),
                                child: Column(
                                  children: [
                                    Row(
                                      children: [
                                        Container(
                                          height: 80,
                                          width: 4,
                                          decoration: BoxDecoration(
                                            color: const Color(0xffF56E98)
                                                .withOpacity(0.5),
                                            borderRadius:
                                                const BorderRadius.all(
                                                    Radius.circular(4.0)),
                                          ),
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.all(20.0),
                                          child: Column(
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Padding(
                                                padding: const EdgeInsets.only(
                                                    left: 4, bottom: 2),
                                                child: Text(
                                                  '温度',
                                                  textAlign: TextAlign.center,
                                                  style: TextStyle(
                                                    fontSize: 24,
                                                    fontWeight: FontWeight.w500,
                                                    letterSpacing: -0.1,
                                                    color: Colors.redAccent
                                                        .withOpacity(0.5),
                                                  ),
                                                ),
                                              ),
                                              const SizedBox(
                                                height: 10,
                                              ),
                                              Row(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.end,
                                                children: [
                                                  SizedBox(
                                                    width: 40,
                                                    height: 40,
                                                    child: SvgPicture.asset(
                                                        'image/temperature.svg'),
                                                  ),
                                                  Padding(
                                                    padding:
                                                        const EdgeInsets.only(
                                                            left: 20,
                                                            bottom: 3),
                                                    child: Text(
                                                      '${(double.parse(state.temperature) * widget.animation!.value).toDouble()}',
                                                      textAlign:
                                                          TextAlign.center,
                                                      style: const TextStyle(
                                                        fontWeight:
                                                            FontWeight.w600,
                                                        fontSize: 24,
                                                        color:
                                                            Color(0xFF253840),
                                                      ),
                                                    ),
                                                  ),
                                                  Padding(
                                                    padding:
                                                        const EdgeInsets.only(
                                                            left: 4, bottom: 5),
                                                    child: Text(
                                                      '℃',
                                                      textAlign:
                                                          TextAlign.center,
                                                      style: TextStyle(
                                                        fontWeight:
                                                            FontWeight.w600,
                                                        fontSize: 20,
                                                        letterSpacing: -0.2,
                                                        color: const Color(
                                                                0xFF3A5160)
                                                            .withOpacity(0.5),
                                                      ),
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                    const SizedBox(
                                      height: 8,
                                    ),
                                    Row(
                                      children: [
                                        Container(
                                          height: 80,
                                          width: 4,
                                          decoration: BoxDecoration(
                                            color: const Color(0xFF87A0E5)
                                                .withOpacity(0.8),
                                          ),
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.all(20.0),
                                          child: Column(
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Padding(
                                                padding: const EdgeInsets.only(
                                                    left: 4, bottom: 2),
                                                child: Text(
                                                  '湿度',
                                                  textAlign: TextAlign.center,
                                                  style: TextStyle(
                                                    fontWeight: FontWeight.w500,
                                                    fontSize: 24,
                                                    letterSpacing: -0.1,
                                                    color: Colors.blue
                                                        .withOpacity(0.5),
                                                  ),
                                                ),
                                              ),
                                              Row(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.end,
                                                children: [
                                                  SizedBox(
                                                    width: 40,
                                                    height: 40,
                                                    child: SvgPicture.asset(
                                                        'image/humidity.svg'),
                                                  ),
                                                  Padding(
                                                    padding:
                                                        const EdgeInsets.only(
                                                            left: 20,
                                                            bottom: 3),
                                                    child: Text(
                                                      '${(double.parse(state.humidity) * widget.animation!.value).toDouble()}',
                                                      textAlign:
                                                          TextAlign.center,
                                                      style: const TextStyle(
                                                        fontWeight:
                                                            FontWeight.w600,
                                                        fontSize: 24,
                                                        color:
                                                            Color(0xFF17262A),
                                                      ),
                                                    ),
                                                  ),
                                                  Padding(
                                                    padding:
                                                        const EdgeInsets.only(
                                                            left: 8, bottom: 5),
                                                    child: Text(
                                                      '%',
                                                      textAlign:
                                                          TextAlign.center,
                                                      style: TextStyle(
                                                        fontWeight:
                                                            FontWeight.w600,
                                                        fontSize: 20,
                                                        letterSpacing: -0.2,
                                                        color: const Color(
                                                                0xFF3A5160)
                                                            .withOpacity(0.5),
                                                      ),
                                                    ),
                                                  ),
                                                ],
                                              )
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                        Padding(
                          padding: const EdgeInsets.only(
                              left: 24, right: 24, top: 8, bottom: 8),
                          child: Container(
                            height: 4,
                            decoration: const BoxDecoration(
                              color: Color(0xFFF2F3F8),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(4.0)),
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(
                              left: 24, right: 24, top: 8, bottom: 16),
                          child: Row(
                            children: [
                              Expanded(
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    const Text(
                                      '加热',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontWeight: FontWeight.w500,
                                        fontSize: 24,
                                        letterSpacing: -0.2,
                                        color: Color(0xFF253840),
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(
                                        left: 10,
                                      ),
                                      child: SizedBox(
                                        height: 30,
                                        width: 30,
                                        child: state.heatStatus
                                              ? clipImage('image/heat.png', 1)
                                              : clipImage('image/stop.png', 2),
                                        // child: AnimatedSwitcher(
                                        //   duration: const Duration(seconds: 1),
                                        //   transitionBuilder: (Widget child,
                                        //       Animation<double> animation) {
                                        //     return SizeTransition(
                                        //       sizeFactor: animation,
                                        //       child: child,
                                        //     );
                                        //   },
                                        //   child: state.heatStatus
                                        //       ? clipAnimationImage('image/heat.png', 1)
                                        //       : clipImage('image/stop.png', 2),
                                        // ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Expanded(
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    const Text(
                                      '除湿',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontWeight: FontWeight.w500,
                                        fontSize: 24,
                                        letterSpacing: -0.2,
                                        color: Color(0xFF253840),
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(
                                        left: 10,
                                      ),
                                      child: SizedBox(
                                        height: 30,
                                        width: 30,
                                        child: state.dehumidifyStatus
                                            ? clipImage('image/deh.png', 3)
                                            : clipImage('image/stop.png', 4),
                                        // AnimatedSwitcher(
                                        //   duration: const Duration(seconds: 1),
                                        //   transitionBuilder: (Widget child,
                                        //           Animation<double>
                                        //               animation) =>
                                        //       ScaleTransition(
                                        //     scale: animation,
                                        //     child: child,
                                        //   ),
                                        //   child: state.dehumidifyStatus
                                        //       ? clipColorImage('image/deh.png', 3)
                                        //       : clipImage('image/stop.png', 4),
                                        // ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Expanded(
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    const Text(
                                      '排风',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontWeight: FontWeight.w500,
                                        fontSize: 24,
                                        letterSpacing: -0.2,
                                        color: Color(0xFF253840),
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(
                                        left: 10,
                                      ),
                                      child: Container(
                                        height: 30,
                                        width: 30,
                                        child: state.exhaustStatus
                                            ? clipImage(
                                            'image/pf.png', 5)
                                            : clipImage('image/stop.png', 6),
                                        // AnimatedSwitcher(
                                        //   duration: const Duration(seconds: 1),
                                        //   transitionBuilder: (Widget child,
                                        //           Animation<double>
                                        //               animation) =>
                                        //       RotationTransition(
                                        //     turns: animation,
                                        //     child: child,
                                        //   ),
                                        //   child: state.exhaustStatus
                                        //       ? clipAnimationImage(
                                        //           'image/pf.png', 5)
                                        //       : clipImage('image/stop.png', 6),
                                        // ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Expanded(
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    const Text(
                                      '空调',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontWeight: FontWeight.w500,
                                        fontSize: 24,
                                        letterSpacing: -0.2,
                                        color: Color(0xFF253840),
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(
                                        left: 10,
                                      ),
                                      child: Container(
                                        height: 30,
                                        width: 30,
                                        child: state.airConStatus
                                            ? clipImage(
                                            'image/air.png', 7)
                                            : clipImage('image/stop.png', 8),
                                        // AnimatedSwitcher(
                                        //   duration: const Duration(seconds: 1),
                                        //   transitionBuilder: (Widget child,
                                        //           Animation<double>
                                        //               animation) =>
                                        //       RotationTransition(
                                        //     turns: animation,
                                        //     child: child,
                                        //   ),
                                        //   child: state.airConStatus
                                        //       ? clipAnimationImage(
                                        //           'image/air.png', 7)
                                        //       : clipImage('image/stop.png', 8),
                                        // ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(
                              left: 24, right: 24, top: 8, bottom: 16),
                          child: Row(
                            children: [
                              Expanded(
                                flex: 1,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    const Text(
                                      '自动',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontWeight: FontWeight.w500,
                                        fontSize: 24,
                                        letterSpacing: -0.2,
                                        color: Color(0xFF253840),
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(
                                        left: 10,
                                      ),
                                      child: Container(
                                        height: 30,
                                        width: 30,
                                        child: state.autoStatus
                                            ? clipImage('image/auto.png', 9)
                                            : clipImage('image/stop.png', 10),
                                        // AnimatedSwitcher(
                                        //   duration: const Duration(seconds: 1),
                                        //   transitionBuilder: (Widget child,
                                        //           Animation<double>
                                        //               animation) =>
                                        //       ScaleTransition(
                                        //     scale: animation,
                                        //     child: child,
                                        //   ),
                                        //   child: state.autoStatus
                                        //       ? clipColorImage('image/auto.png', 9)
                                        //       : clipImage('image/stop.png', 10),
                                        // ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Expanded(
                                flex: 1,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    const Text(
                                      '报警',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontWeight: FontWeight.w500,
                                        fontSize: 24,
                                        letterSpacing: -0.2,
                                        color: Color(0xFF253840),
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(
                                        left: 10,
                                      ),
                                      child: Container(
                                        height: 30,
                                        width: 30,
                                        child: state.alarmStatus
                                            ? clipImage('image/warn.png', 11)
                                            : clipImage('image/stop.png', 12),
                                        // AnimatedSwitcher(
                                        //   duration: const Duration(seconds: 1),
                                        //   transitionBuilder: (Widget child,
                                        //           Animation<double>
                                        //               animation) =>
                                        //       ScaleTransition(
                                        //     scale: animation,
                                        //     child: child,
                                        //   ),
                                        //   child: state.alarmStatus
                                        //       ? clipColorImage('image/warn.png', 11)
                                        //       : clipImage('image/stop.png', 12),
                                        // ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              const Expanded(
                                flex: 2,
                                child: Text("")
                                // Row(
                                //   mainAxisAlignment: MainAxisAlignment.center,
                                //   crossAxisAlignment: CrossAxisAlignment.start,
                                //   children: [
                                //     const Text(
                                //       '空气净化',
                                //       textAlign: TextAlign.center,
                                //       style: TextStyle(
                                //         fontFamily: 'Montserrat',
                                //         fontWeight: FontWeight.w500,
                                //         fontSize: 24,
                                //         letterSpacing: -0.2,
                                //         color: Color(0xFF253840),
                                //       ),
                                //     ),
                                //     Padding(
                                //       padding: const EdgeInsets.only(
                                //         left: 10,
                                //       ),
                                //       child: Container(
                                //         height: 30,
                                //         width: 30,
                                //         child: AnimatedSwitcher(
                                //           duration: const Duration(seconds: 1),
                                //           transitionBuilder: (Widget child,
                                //                   Animation<double>
                                //                       animation) =>
                                //               ScaleTransition(
                                //             scale: animation,
                                //             child: child,
                                //           ),
                                //           child: state.airCleanStatus
                                //               ? clipColorImage('image/kqjh.png', 13)
                                //               : clipImage('image/stop.png', 14),
                                //         ),
                                //       ),
                                //     ),
                                //   ],
                                // ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            );
          },
        );
      },
    );
  }

  Widget clipImage(String imgPath, int val) {
    return ClipRect(key: ValueKey(val), child: Image.asset(imgPath));
  }

  Widget clipAnimationImage(String imagePath, int val) {
    return ClipRect(
        key: ValueKey(val),
        child: RotationTransition(
          turns: CurvedAnimation(
              parent: _animationController!, curve: Curves.linear),
          child: Image.asset(imagePath),
        ));
  }

  Widget clipColorImage(String imgPath, int val) {
    return ClipRect(
      key: ValueKey(val),
      child: MirrorAnimation<Color?>(
        tween: ColorTween(begin: Colors.red, end: Colors.blue),
        builder: (context,child,value){
          return Image.asset(imgPath,color: value,);
        },
        duration: const Duration(seconds: 5),
        curve: Curves.easeInOut,
      )
    );
  }
}
